<template>
  <div class="teachers">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="initTeachers"
    >
      <van-card
        v-for="teacher in teachers"
        :key="teacher.id"
        :price="teacher.salary"
        :thumb="teacher.user.decorate_avatar"
        @click="enterDetail(teacher.id)"
        lazy-load
      >
        <template #desc>
          <div class="introduction">{{ teacher.introduction }}</div>
        </template>
        <template #title>
          <div class="t-title">{{ teacher.real_name }}</div>
        </template>
        <template #price-top>
          <van-rate
            v-model="teacher.rating_avg"
            :size="20"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
            readonly
          />
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script>
import { initTeacherListAPI } from "@/api/userApi";
export default {
  data() {
    return {
      teachers: [],
      loading: false,
      finished: false,
      page: 1,
    };
  },
  methods: {
    async initTeachers() {
      const { data: res } = await initTeacherListAPI(this.page);
      if (!res.next) {
        this.finished = true;
      }
      this.teachers = [...this.teachers, ...res.results];
      this.page++;
      this.loading = false;
    },
    enterDetail(id) {
      this.$router.push(`teachers/${id}`);
    },
  },
};
</script>

<style scoped>
.teachers .introduction {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-indent: 12px;
  margin: 5px 0;
}
.teachers .t-title {
  font-size: 14px;
}
.teachers .van-card__price {
  float: right;
}
</style>
